<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Vue3 + Tailwind CSS 动态预览</title>
    <script src="https://cdn.tailwindcss.com"></script> 
    <script src="https://unpkg.com/vue@3.4.15/dist/vue.global.js"></script> 
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        textarea {
            width: 100%;
            height: 300px;
            margin-bottom: 10px;
            padding: 10px;
            font-family: monospace;
            font-size: 14px;
            border: 1px solid #ccc;
            resize: vertical;
        }
        .preview-container {
            border: 1px solid #e4e4e4;
            padding: 20px;
            min-height: 200px;
            background-color: #f9f9f9;
            margin-top: 20px;
        }
        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h1>Vue3 + Tailwind CSS 动态预览</h1>
    <textarea id="codeInput" placeholder="输入你的 HTML/Vue 代码，例如：<div class='text-[30px] w-[20px]'>Hello World</div>">
<div class="text-[30px] w-[20px] text-blue-500">Hello World</div>
    </textarea>
    
    <div class="controls">
        <button id="previewBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            预览
        </button>
        <button id="clearBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
            清空
        </button>
    </div>
    
    <div class="preview-container" id="previewArea">
        <!-- 预览内容将在此处显示 -->
    </div>

    <script>
        const { createApp } = Vue;

        document.getElementById('previewBtn').addEventListener('click', () => {
            const code = document.getElementById('codeInput').value;
            const previewArea = document.getElementById('previewArea');
            
            // 清空预览区域
            previewArea.innerHTML = '';
            
            try {
                const app = createApp({
                    template: code
                });
                app.mount(previewArea);
            } catch (error) {
                previewArea.innerHTML = `<div class="text-red-500">渲染错误：${error.message}</div>`;
            }
        });

        // 新增清空功能
        document.getElementById('clearBtn').addEventListener('click', () => {
            document.getElementById('codeInput').value = '';
            document.getElementById('previewArea').innerHTML = '';
        });
    </script>
</body>
</html>